<template>
  <div>
    <el-dialog title="添加小工具" :visible.sync="dialog" width="630px" :before-close="handleClose">
      <!-- <span>这是一段信息{{dialog}}</span> -->
      <div class="center">
        <el-transfer v-model="value" :data="data" :titles="['未选择', '已选择']"></el-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  //dialog-控制弹窗开关true/false
  //allFBData-全部小方块[{},{},{}...]
  //seleFBData-已选小方块[1，2，3，4...]
  props: ["dialog", "allFBData", "seleFBData","row"],
  data() {
    return {
      data: [
        {
          key: 12,
          label: `备选项12`,
          disabled: false
        },
        {
          key: 13,
          label: `备选项13`,
          disabled: false
        }
      ],
      value: [],
      Rowe:undefined
    };
  },
  watch: {
    //全部小方块
    allFBData() {
      this.data = this.allFBData;
    },
    //已选小方块
    seleFBData() {
      this.value = this.seleFBData;
    },
    //用户信息
    row(){
        this.Rowe=this.row
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.$emit("to_dialog", "handleClose", false,[],this.Rowe.id);
        })
        .catch(_ => {});
    },
    //取消
    cancel() {
      console.log("点击了取消");
      this.$emit("to_dialog", "cancel", false,[],this.Rowe.id);
    },
    //保存
    confirm() {
      console.log("点击了保存");
      let arr = [];
      for (let i = 0; i < this.value.length; i++) {
        for (let j = 0; j < this.data.length; j++) {
          if (this.value[i] == this.data[j].key) {
            arr.push(this.data[j]);
          }
        }
      }
      let arr2=[]
      for(let x=0;x<arr.length;x++){
        let objs2={}
        objs2['id']=this.Rowe.id
        objs2['name']=arr[x]['label']
        objs2['x']=arr[x]['x']
        objs2['y']=arr[x]['y']
        objs2['w']=arr[x]['w']
        objs2['h']=arr[x]['h']
        objs2['i']=arr[x]['i']
        arr2.push(objs2)
          // arr[x]['id']=this.Rowe.id
          // arr[x]['buttonId']=arr[x]['i']
          // arr[x]['name']=arr[x]['label']
          // arr[x]['status']=1 //status=1已选择    status=0未选择
      }
      console.log(arr2)
      this.$emit("to_dialog", "confirm", false,arr2,this.Rowe.id);
    }
  }
};
</script>
<style lang="scss" scoped>
.center {
  display: inline-block;
  margin: auto;
}
</style>